<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Featured Properties</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
        </style>
        <style>
            .myButton3 {
                background-color:#44c767;
                -moz-border-radius:28px;
                -webkit-border-radius:28px;
                border-radius:28px;
                border:1px solid #44c767;
                display:inline-block;
                cursor:pointer;
                color:#ffffff;
                font-family: tahoma, avant, arial;
                font-size:17px;
                padding:8px 123px;
                text-decoration:none;
                text-shadow:0px 1px 0px #44c767;
            }
            .myButton3:hover {
                background-color:#44c767;
                color:#ffffff;
            }
            .myButton3:active {
                position:relative;
                top:1px;
                color:#ffffff;
            }
            .myButton3:visited {
                color:#ffffff;
            }
        </style>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/token/jquery.tokeninput.js"></script>   
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#table-listings tr:even").css("background-color", "#f3f3f3");
            });
        </script>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        <script type="text/javascript">
            function feature() {

                if (!$('#agree').is(":checked")) {
                    alert("Please check the checkbox to indicate that you agree to our terms & conditions.");
                    return;
                }
                
                var transactionID = $("#transaction-id").val();
                var city = $("#listing-city").val();
                var term = $("#listing-term").val();
                var duration = $("#listing-duration").val();
                
                if (!city ||  !term) {
                    alert("City and Category are required fields.");
                    return;
                }

                try {
                    $.blockUI({message: "<div style='font-family: avant, Century Gothic, Calibri, Verdana; padding: 10px;'>Processing request ...</div>"});

                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/featured.htm",
                        data: {
                            city: city,
                            term: term,
                            listingID: "${model.listing.id}",
                            a: 29
                        },
                        timeout: 200000,
                        success: function(data) {
                            $.unblockUI();
                            if (data.model.success) {
                                window.location = "${model.props.appPath}/featured.htm?a=28&listingID=${model.listing.id}&city=" + city + "&term=" + term + "&duration=" + duration + " &transactionID=" + transactionID;
                            }
                            else {
                                alert("Oops! there was a problem: " + data.model.message);
                            }
                        }
                    });
                }
                catch (e) {
                    alert("Oops. We cannot process your request at this time. Please send an email to team@rentpad.me and we will help you with this issue: " + e)
                }
            }
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    <br>
                    <br>
                    <span style="font-size: 27px; font-weight: bold; color: #555">&nbsp;Next, choose on which city and rental term category you want this featured:</span> 
                    <hr>

                    <Br>

                    <table style="width: 100%; margin-top: 5px;" >
                        <tr>
                            <td align="left" style="width:450px;">
                                <img src="${model.props.appPath}/img/concept.jpg" style="width:430px; margin-left: 2%;"/>
                            </td>

                            <td align="left" style="vertical-align: top; background-color: #f7f7f7;">

                                <div style="padding-left: 7px; padding-right: 7px; padding-bottom: 7px;" >

                                    <table cellpadding="7" cellspacing="7" style="font-size: 15px">                                         
                                        <tr>
                                            <td style="vertical-align: top;">Property:</td>
                                            <td style="vertical-align: top;">
                                                <a href="${model.props.appPath}/listing.htm?a=2&id=${model.listing.id}" target="_blank" style="text-decoration: none; color: #111">${model.listing.title}</a>
                                            </td>
                                        </tr>        
                                        
                                        <!--
                                        <tr>
                                            <td style="vertical-align: top; width: 90px;">Feature Start:</td>
                                            <td style="vertical-align: top;">
                                                 ${model.displayStartDate}
                                            </td>
                                        </tr>                                
                                        <tr>
                                            <td style="vertical-align: top;">Feature End:</td>
                                            <td style="vertical-align: top;">
                                                 ${model.displayEndDate}
                                            </td>
                                        </tr>
                                        -->
                                        
                                        <tr>
                                            <td>Duration: </td>
                                            <td>
                                                <select id="listing-duration" name="duration" style="font-family: avant; font-size: 15px; width:200px; padding: 2px; color: #111">
                                                    <option value="1" selected>1 Week &mdash; Php 97</option>
                                                    <option value="2">2 Weeks &mdash; Php 194</option>
                                                    <option value="3">3 Weeks &mdash; Php 291</option>
                                                    <option value="4">4 Weeks &mdash; Php 388</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>City: </td>
                                            <td>
                                                <select id="listing-city" name="city" style="font-family: avant; font-size: 15px; width:200px; padding: 2px; color: #111">
                                                    <option value="" selected> Choose City </option>
                                                    <option value="Makati">Makati</option>
                                                    <option value="Taguig">Taguig</option>
                                                    <option value="Mandaluyong">Mandaluyong</option>
                                                    <option value="Pasig">Pasig</option>
                                                    <option value="Quezon City">Quezon City</option>
                                                    <option value="Manila">Manila</option>
                                                    <option value="Pasay">Pasay</option>
                                                    <option value="Paranaque">Paranaque</option>
                                                    <option value="Muntinlupa">Muntinlupa</option>
                                                    <option value="San Juan">San Juan</option>
                                                    <option value="Cebu">Cebu</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Category: </td>
                                            <td>
                                                <select id="listing-term" name="city" style="font-family: avant; font-size: 15px; width:200px; padding: 2px; color: #111">
                                                    <option value="" selected> Choose Rental Term </option>
                                                    <option value="1">long term rentals</option>
                                                    <option value="2">short term rentals</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </table>

                                    <form id="form" style="color: #111">
                                        <br>
                                        <hr>
                                        <br>
                                        
                                        <div style="padding-left: 7%; font-size: 14px;">

                                            &nbsp;&nbsp;
                                            <input id="transaction-id" type="hidden" value="${model.transactionID}"/>
                                            <a href="#" class="myButton3" onclick="feature();">Feature this property</a>
                                            <Br><Br>                        
                                            &nbsp;&nbsp;&nbsp;
                                            <input id="agree" type="checkbox" /> I agree to the <a href="${model.props.appPath}/rentpad-terms-and-conditions" style="color: #369; text-decoration: none;">terms & conditions</a>
                                        </div>
                                    </form>
                                </div>

                            </td>
                        </tr>
                    </table> 
                </div>

                <br><br>                

            </div>

            <%@include file="footer.jsp" %>

        </div>

    </body>

</html>
